<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>isearch@ix</title>
    <!-- Bootstrap 核心 CSS文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>-->

    <style>
        .rs-table {
            /*padding-top:20px;*/
            /*padding-bottom: 20px;*/
            /*margin: 20px;*/
            /*width:100%*/
            /*overflow: auto;*/
            /*overflow: hidden;*/
            /*display: block;*/
            /*width=800,给定宽度也是关键之一*/
            table-layout: fixed;
            margin-right: 0px;
            margin-left: 0px;
            margin-top: 2.7px;
            margin-bottom: 2.7px;
            /*border: 10px;*/
            /*border-color: rgba(255,255,255,1);*/
            background-color: #204B56;
            /*width:90%;*/
        }

        #thin-padding {
            background-color: #e7e7e7;
            padding-left: 4px;
            padding-right: 4px;
            /*overflow: hidden;*/
            /*zoom:1;*/
        }

        .blob-num {
            width: 5%;
            min-width: 50px;
            padding-right: 10px;
            padding-left: 10px;
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
            font-size: 12px;
            line-height: 20px;
            color: rgb(221, 215, 163);
            /*color: rgba(27, 31, 35, 0.3);*/
            text-align: right;
            white-space: nowrap;
            vertical-align: top;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .blob-code {
            position: relative;
            padding-right: 10px;
            padding-left: 10px;
            line-height: 20px;
            vertical-align: top;
        }

        .hidden-div {
            /*这两者在div内组合是关键之一*/
            text-overflow: ellipsis;
            overflow: hidden;
            /*下面这些也可以直接放在div中*/
            word-wrap: normal;
            white-space: pre;
        }

        .td-code-inner {
            /*这两者组合是关键之一*/
            text-overflow: ellipsis;
            overflow: hidden;
            word-wrap: normal;
            white-space: pre;
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
            font-size: 14px;
            color: rgb(181, 194, 217);
        }

        .code-scroll {
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="thin-padding" class="jumbotron">
        {% for fmate in fmates %}
        <!--/*width=800,给定宽度也是关键之一*/-->
        <table class="rs-table" width=800>
            <tbody>
            {% for line in fmate %}
            <tr>
                <td class="blob-num">{{line['flid']}}</td>
                <!--<td class="blob-code td-code-inner"><div class="hidden-div">{{line['line']}}</div></td>-->
                <td class="blob-code td-code-inner">{{line['line']}}</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
        {% endfor %}
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(document).on('ready', function () {
        var twidth = $('#thin-padding').width();
        $('#thin-padding table').width(twidth);

        $('.col-md-4 form').on('submit', function (event) {
            console.log(event.type);
            alert('(Bubble stage)The event type of this Form:  ' + event.type);
            alert('succeed!');
            event.preventDefault();
        });

        $('.col-md-4 form [type=submit]').click(function (event) {
            alert('(Bubble stage)The event type of this Button:  ' + event.type);
            alert('You have clicked this submit button and the Form will be submitted soon.')
        });

        changeStatus = function (event) {
            alert(event.type + ' event on Checkbox has being triggerd.')
        }

//        $('[type=checkbox]').change( function (event) {
//                changeStatus(event);
//        });

        $('[type=checkbox]').click(function (event) {
            changeStatus(event);
        });
    });
    //测试1，OK
    //            $('button').on('click',function (event) {
    //                event.preventDefault();
    //                console.log(event.type);
    //                alert(event.type);
    //                alert('submit!');
    //            });
    //测试2，OK
    //            $('#testForm').on('click',function (event) {
    //                event.preventDefault();
    //                console.log(event.type);
    //                alert(event.type);
    //                alert('submit!');
    //            });
    //测试3，OK
</script>
<script type="text/javascript">
    $(window).resize(function () {
        var twidth = $('#thin-padding').width();
        $('#thin-padding table').width(twidth);
    });
</script>
</body>